<template>
  <div class="ani-area">
    <template v-for="(item, index) of urls">
      <img :src="item" :style="index === indedx || 'display: none'" :key="`img-${index}`" />
    </template>
  </div>
</template>

<script>
export default {
  name: "animation",
  props: {
    isAnimation: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      urls: [],
      isPlaying: true,
      indedx: 15,
      fps: 0,
    }
  },
  created() {
    this.startRender()
  },

  mounted() {
    this.urls.push(require("../assets/skiing/skiing_00.png"))
    this.urls.push(require("../assets/skiing/skiing_01.png"))
    this.urls.push(require("../assets/skiing/skiing_02.png"))
    this.urls.push(require("../assets/skiing/skiing_03.png"))
    this.urls.push(require("../assets/skiing/skiing_04.png"))
    this.urls.push(require("../assets/skiing/skiing_05.png"))
    this.urls.push(require("../assets/skiing/skiing_06.png"))
    this.urls.push(require("../assets/skiing/skiing_07.png"))
    this.urls.push(require("../assets/skiing/skiing_08.png"))
    this.urls.push(require("../assets/skiing/skiing_09.png"))
    this.urls.push(require("../assets/skiing/skiing_10.png"))
    this.urls.push(require("../assets/skiing/skiing_11.png"))
    this.urls.push(require("../assets/skiing/skiing_12.png"))
    this.urls.push(require("../assets/skiing/skiing_13.png"))
    this.urls.push(require("../assets/skiing/skiing_14.png"))
    this.urls.push(require("../assets/skiing/skiing_15.png"))
    this.urls.push(require("../assets/skiing/skiing_16.png"))
    this.urls.push(require("../assets/skiing/skiing_17.png"))
    this.urls.push(require("../assets/skiing/skiing_18.png"))
    this.urls.push(require("../assets/skiing/skiing_19.png"))
    this.urls.push(require("../assets/skiing/skiing_20.png"))
    this.urls.push(require("../assets/skiing/skiing_21.png"))
    this.urls.push(require("../assets/skiing/skiing_22.png"))
    this.urls.push(require("../assets/skiing/skiing_23.png"))
    this.urls.push(require("../assets/skiing/skiing_24.png"))
    this.urls.push(require("../assets/skiing/skiing_25.png"))
    this.urls.push(require("../assets/skiing/skiing_26.png"))
    this.urls.push(require("../assets/skiing/skiing_27.png"))
    this.urls.push(require("../assets/skiing/skiing_28.png"))
    this.urls.push(require("../assets/skiing/skiing_29.png"))

    // setInterval(() => {
    //   this.indedx++
    //   if (this.indedx === 30) this.indedx = 0
    // }, 50)
  },

  methods: {
    render() {
      if (!this.isPlaying) return
      this.fps++
      if (this.fps == 3) {
        this.indedx++
        if (this.indedx === 30) this.indedx = 0
        this.fps = 0
      }
    },
    startRender() {
      const _this = this
      ;(function _loop() {
        _this.render()
        _this.loopnum = requestAnimationFrame(() => {
          _loop()
        })
      })()
    },
    stopRender() {
      cancelAnimationFrame(this.loopnum)
    },
  },
  watch: {
    isAnimation(value) {
      this.isPlaying = value
    },
  },
  destroyed() {
    this.stopRender()
  },
}
</script>

<style lang="scss" scoped>
.ani-area {
  // height: 250px;
  //   height: 100px;
  img {
    width: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
</style>
